<template>
  <el-container>
    <el-aside width="200px">
      <!--头像部分-->
      <el-row class="demo-avatar demo-basic">
        <el-col :span="12">
          <div class="demo-basic--circle">
            <div class="block">
              <el-avatar shape="square" :size="70" :src="squareUrl"></el-avatar>
            </div>
            <!--						<div class="block" v-for="size in sizeList" :key="size">
							<el-avatar :size="size" :src="circleUrl"></el-avatar>
						</div>-->
          </div>
        </el-col>
        <el-col :span="12">
          <div class="sub-title">欢迎你</div>
          <div>老司机</div>
        </el-col>
      </el-row>

      <!--导航部分-->
      <el-menu :default-active="activePath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router
        unique-opened style="min-height: 1000px;">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>工作台</span>
          </template>
          <el-menu-item index="/carrier/personalcentre" @click="saveNavState('/carrier/personalcentre')">个人中心</el-menu-item>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>客户管理</span>
          </template>
          <el-menu-item index="/carrier/customermanagement" @click="saveNavState('/carrier/customermanagement')">客户管理</el-menu-item>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>询价单管理</span>
          </template>
          <el-menu-item index="/carrier/inquirymanagement" @click="saveNavState('/carrier/inquirymanagement')">询价单总览</el-menu-item>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>订单管理</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/orderlist')" index="/carrier/orderlist">订单总览</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/addorder')" index="/carrier/addorder">新增订单</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/ddcheck')" index="/carrier/ddcheck">订单审核</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/checkprice')" index="/carrier/checkprice">订单询价</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/sureprice')" index="/carrier/sureprice">确认报价</el-menu-item>
        </el-submenu>

        <el-submenu index="'5'">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>运输计划</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/transportplan')" index="/carrier/transportplan">运输计划</el-menu-item>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>调度管理</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/distribution')" index="/carrier/scheduling/distribution">调度配载</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/orderdistribution')" index="/carrier/scheduling/orderdistribution">订单派发</el-menu-item>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>运输执行</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/tracking')" index="/carrier/transportimplementation/tracking">在线跟踪</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/billoflading')" index="/carrier/transportimplementation/billoflading">提货单</el-menu-item>
        </el-submenu>

        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>回单管理</span>
          </template>
          <el-menu-item @click="saveNavState('/carrier/signature')" index="/carrier/returnreceipt/signature">签收单</el-menu-item>
          <el-menu-item @click="saveNavState('/carrier/handover')" index="/carrier/returnreceipt/handover">回单交接</el-menu-item>
        </el-submenu>

        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>结算管理</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/receivables')" index="/carrier/settlement/receivables">应收款结算</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/accountspayable')" index="/carrier/settlement/accountspayable">应付款结算</el-menu-item>
        </el-submenu>

        <el-submenu index="10">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>发票管理</span>
          </template>
<<<<<<< HEAD
          <el-menu-item index="/carrier/contractManagement2">发票总览</el-menu-item>
          <el-menu-item index="/carrier/detail2">查看详情</el-menu-item>
          <el-menu-item index="/carrier/kaiPiao2">新增发票</el-menu-item>
=======
          <el-menu-item @click="saveNavState('/carrier/invoice')" index="/carrier/invoice">发票管理</el-menu-item>
>>>>>>> 0fe843eca306bdcbbc95a9e76e6fa0a740119d9c
        </el-submenu>

        <el-submenu index="11">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>运力资源管理</span>
          </template>
          <el-menu-item @click="saveNavState('/carrier/Dynamic/cars')" index="/carrier/Dynamic/cars">车辆管理</el-menu-item>
          <el-menu-item @click="saveNavState('/carrier/Dynamic/personnels')" index="/carrier/Dynamic/personnels">人员管理</el-menu-item>
          <el-menu-item @click="saveNavState('/carrier/Dynamic/KPI')" index="/carrier/Dynamic/KPI">KPI数据</el-menu-item>
        </el-submenu>

        <el-submenu index="14">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>合同管理</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/contract/clientcontracts')" index="/carrier/contract/clientcontracts">客户合同</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/contract/drivercontract')" index="/carrier/contract/drivercontract">外协司机合同</el-menu-item>
        </el-submenu>

        <el-submenu index="12">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>异常管理</span>
          </template>
<<<<<<< HEAD
          <el-menu-item index="/carrier/abnormalities">异常统计</el-menu-item>
          <el-menu-item index="/carrier/deal">异常处理</el-menu-item>
          <el-menu-item index="/carrier/absDetail">异常查看</el-menu-item>
=======
          <el-menu-item @click="saveNavState('/carrier/abnormalities')" index="/carrier/abnormalities">异常统计</el-menu-item>
>>>>>>> 0fe843eca306bdcbbc95a9e76e6fa0a740119d9c
        </el-submenu>

        <el-submenu index="13">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item  @click="saveNavState('/carrier/System/basicinformation')" index="/carrier/System/basicinformation">基础信息</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/System/network')" index="/carrier/System/network">网点管理</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/System/driveraccount')" index="/carrier/System/driveraccount">司机账号管理</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/System/addpersonnel')" index="/carrier/System/addpersonnel">人员管理</el-menu-item>
          <el-menu-item  @click="saveNavState('/carrier/System/operationallog')" index="/carrier/System/operationallog">操作日志</el-menu-item>
          <el-submenu index="13-6">
            <template slot="title">消息管理</template>
            <el-menu-item  @click="saveNavState('/carrier/System/addmessage')" index="/carrier/System/addmessage">新增消息</el-menu-item>
            <el-menu-item  @click="saveNavState('/carrier/System/modificationmessage')" index="/carrier/System/modificationmessage">修改消息</el-menu-item>
            <el-menu-item  @click="saveNavState('/carrier/System/Auditmessage')" index="/carrier/System/Auditmessage">审核消息</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 路由占位符 -->
      <router-view />
    </el-main>
  </el-container>
</template>

<style lang="less" scoped>
.el-aside {
  text-align: center;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  /* text-align: center; */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-menu {
  text-align: left;
}
div.el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.el-submenu li.el-menu-item {
  height: 40px;
  line-height: 40px;
  min-width: 199px !important;
}
</style>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Carrier",
  data() {
    return {
      squareUrl:
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=570445447,3580198395&fm=26&gp=0.jpg",
      sizeList: ["large", "medium", "small"],
      activePath: "",
    };
  },
  components: {},
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    saveNavState(activePath) {
      window.sessionStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    
  },
  // 挂载后
  mounted() {
    // 让导航菜单的高度跟右侧内容高度一致
    let main = document.getElementsByClassName("el-main")[0];
    let menu = document.getElementsByClassName("el-menu-vertical-demo")[0];
    menu.style.height = parseInt(getComputedStyle(main).height) - 75 + "px";
  },
  // 更新后
  updated() {
    // 让导航菜单的高度跟右侧内容高度一致
    let main = document.getElementsByClassName("el-main")[0];
    let menu = document.getElementsByClassName("el-menu-vertical-demo")[0];
    menu.style.height = parseInt(getComputedStyle(main).height) - 75 + "px";
  },
};
</script>
